<template>
	<view class="jmcontent">
		<view class="jmcontent_fixed">
			<!-- 状态栏 -->
			<view class="stauts_bar_view" :style="{ height: statusbarHeight+'px'}"></view>
			<!-- 导航栏内容 -->
			<view class="nav_content">
				<uni-icons class="back_arrow" type="arrowleft" size="24" color="#ffffff" @click="backButtonAction"></uni-icons>
				<text class="nav_title">{{ title }}</text>
			</view>
		</view>
		<!-- 用自定义导航栏页面的占位，防止导航栏遮盖元素 -->
		<view :style="{height: (statusbarHeight + 44) + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		name:"jmnavbar",
		data() {
			return {
				statusbarHeight: 20,
			};
		},
		props:{
			title: {
				type: String,
				default: '自定义导航栏'
			}
		},
		created() {
			const info = uni.getSystemInfoSync();
			this.statusbarHeight = info.statusBarHeight;
		},
		methods: {
			backButtonAction() {
				this.$emit("backClick");
			},
		}
	}
</script>

<style lang="scss">
	
	.jmcontent_fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
	}
	
	.stauts_bar_view {
		background-color: $zm-main-color;
	}
	
	.nav_content {
		width: 100%;
		height: 44px;
		background-color: $zm-main-color;
		display: flex;
		align-items: center;
	}
	
	.back_arrow {
		width: 100rpx;
	}
	
	.nav_title {
		width: 550rpx;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
	}
	
	
</style>
